<template>
  <div class="flex_center login_container">
    <div class="login_box flex">
      
        <div class="align_center">
          <div class="font_bold color_blue b_margin10">
            <div>登录</div>
          </div>
          <a-form-model ref="form" :model="form" :rules="rules">
            <a-form-model-item prop="username">
              <div class="_input">
                <a-icon slot="prefix" type="user" />
                <a-input
                  placeholder="账号"
                  v-model="form.username"
                  size="small"
                >
                </a-input>
              </div>
            </a-form-model-item>

            <a-form-model-item prop="password">
              <div class="_input">
                <a-icon slot="prefix" type="lock" />
                <!-- <a-input placeholder="密码" v-model="form.password"> </a-input> -->
                <a-input-password
                  placeholder="密码"
                  v-model="form.password"
                  size="small"
                >
                </a-input-password>
              </div>
            </a-form-model-item>
          </a-form-model>
          <div class="login_button" @click="toLogin">登录</div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "login",
  data() {
    return {
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
          },
        ],
      },
      form: {
        username: "18631243353",
        password: "123456",
      },
    };
  },
  methods: {
    ...mapActions("account", ["login"]),
    toLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.login(this.form).then((res) => {
            this.$router.replace(this.$route.query.redirect || "/");
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login_container {
  height: 100%;
  background-size: 100% 100%;
}
.login_box {
  margin-left: 200px;
  background-size: 100%;
  width: 40%;
  max-height: 242px;
  min-width: 600px;
  min-height: 242px;
  overflow: hidden;
}
.login_box_left {
  width: 40%;
}
.login_box_right {
  flex: 1;
  padding: 50px;
}
._input {
  width: 190px;
  height: 30px;
  border-radius: 30px;
  background: #f5f8ff;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
._input::v-deep input {
  background-color: #f5f8ff;
  border: 1px solid #f5f8ff;
  margin-left: 2px;
}
.login_button {
  width: 190px;
  height: 30px;
  border-radius: 30px;
  background: #3d7fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
</style>
